<template>
    <div>
        <van-tabs v-model="activeName">
            <van-tab title="忘记密码" name="a">
                <van-field v-model="loginName" left-icon="contact" placeholder="请输入账号"/>
                <van-field v-model="phonenumber" placeholder="请输入电话号" left-icon="phone-o"/>
                <van-field v-model="code" placeholder="请输入验证码" left-icon="comment-o" style="width: 50%; float: left;"/>
                <van-button :color="!disabled?'rgb(7,193,96)':'#999999'"
                            style="width: 40%; margin-left:5%; border-radius: 10px; float: left;"
                            @click="verification($event)"><span v-if="!disabled">获取验证码</span><span
                        v-else>{{time}}S</span></van-button>
                <van-field v-model="password" type="password" left-icon="bag-o" placeholder="请输入密码"/>
                <van-field v-model="password2" type="password" left-icon="bag-o" placeholder="请再次输入密码"/>
                <van-button type="info" style="width: 80%;margin-top: 30px; border-radius: 30px" @click="forget">重置密码
                </van-button>
            </van-tab>
        </van-tabs>
        <div class="footer">
            <span @click="regis1">立即注册</span> | <span @click="login1">去登录</span>
        </div>
    </div>
</template>

<script>
    import {getForget, getvcode} from "../api/api";

    export default {
        name: "forget",
        data() {
            return {
                activeName: "",
                loginName: "",
                phonenumber: "",
                code: "",
                password: "",
                password2: "",
                disabled: false,
                time: 60,
            }
        },
        methods: {
                verification(e) {
                    getvcode(this.phonenumber).then(res => {
                        // console.log(res);
                        if (res.code == 0) {
                            e.target.disabled = true;
                            this.disabled = true;

                            clearInterval(time);
                            let time = setInterval(() => {
                                if (this.time > 0) {
                                    this.time--;

                                } else {
                                    this.time = 60;
                                    e.target.disabled = false;
                                    this.disabled = false;
                                    clearInterval(time);
                                }
                            }, 1000)
                        } else {
                            this.$toast(res.msg);
                        }
                    })

                },

                forget() {
                    if (this.loginName == "" && this.code == "" && this.password == "" && this.password2 == "") {
                        this.$toast("存在没有写的内容")
                        // console.log("错误")
                    } else if (this.password != this.password2) {
                        this.$toast('两次密码不同');
                    } else {
                        getForget(this.loginName, this.code, this.phonenumber, this.password).then(res => {
                            // console.log(res);
                            if(res.code==0){
                                this.$toast("重置成功");
                            }else {
                                this.$toast(res.msg);
                            }

                        })
                    }

                },
            regis1() {
                this.$router.push('/login/register');
            },
            login1() {
                this.$router.push('/login');
            }

            }

    }
</script>

<style lang="less" scoped>
    .footer {
        margin-top: 25%;
        text-align: center;
        font-size: 14px;
        span {
            margin: 0 20px;
        }

        span:hover {
            color: #409EFF;
        }
    }

    /deep/ .van-icon-phone-o::before {
        font-size: 20px;
    }

    /deep/ .van-icon-comment-o::before {
        font-size: 20px;
    }
</style>